/**
 * Created by zhaoxk on 2016/11/15.
 */
import React from 'react';
import {Button, Modal, Upload, Form, Input, Radio} from 'antd';
const FormItem = Form.Item,
//RadioButton = Radio.Button,
    RadioGroup = Radio.Group;

class _UploadImage extends React.Component {
    state = {
        file: {},
        status: false
    };
    onOk = () => {
        const {getFieldsValue} = this.props.form;
        this.props.onOk(getFieldsValue());
    };
    onCancel = () => {
        const {resetFields} = this.props.form;
        resetFields();
        this.props.onCancel();
    };
    onChange = (e) => {
        //TODO 正常情况下，状态为‘done’时，说明文件上传成功了，此时会有服务端响应一个上传成功的图片id回来，从‘response’字段中获取；uid是本地生成随机唯一码，本地校验时使用，不提供给服务端
        //TODO 服务端没有接受图片文件接口时会收到connect post，功能暂时写在error的状态里；等接口完成后将代码移入done
        const {status/*, response, name, uid*/} = e.file;
        switch (status) {
        case 'uploading':
            this.setState({
                status: true
            });
            break;
        case 'done':
            //const id = response.content.id;
            break;
        case 'error':
            break;
        case 'removed':
            break;
        }
    };

    render() {
        const {getFieldDecorator} = this.props.form,
            uploadProp = getFieldDecorator('upload', {
                action: '/',
                onChange: this.onChange,
                beforeUpload: this.beforeUpload,
                disabled: this.state.status
            }),
            nameProp = getFieldDecorator('name', {}),
            eyeTypeProp = getFieldDecorator('eye'),
            remarkProp = getFieldDecorator('remark', {});
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 14}
        };
        return (
            <Modal
                {...this.props}
                maskClosable={false}
                onOk={this.onOk}
                onCancel={this.onCancel}
                title="添加图片"
            >
                <Form
                    horizontal
                >
                    <FormItem
                        {...formItemLayout}
                        label="上传"
                    >
                        {uploadProp(
                            <Upload
                                action="/"
                            >
                                <Button>上传图片</Button>
                            </Upload>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="名称"
                    >
                        {nameProp(
                            <Input
                                placeholder="请输入图片名称"
                            />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="眼别"
                    >
                        {eyeTypeProp(
                            <RadioGroup>
                                <Radio value={0}>左眼</Radio>
                                <Radio value={1}>右眼</Radio>
                                <Radio value={2}>双眼</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="备注"
                    >
                        {remarkProp(
                            <Input
                                type="textarea"
                                placeholder="请输入图片备注"
                            />
                        )}
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}
_UploadImage.file = {};
const UploadImage = Form.create()(_UploadImage);
export default UploadImage;
